window.onload = function() {
    //用Promise封装fileReader
    function reader(file) {
        return new Promise((resolve, reject) => {
            //实例化FileReader对象
            let reader = new FileReader();

            //以二进制的格式读取
            // reader.readAsArrayBuffer(file);

            //读取指定的Blob或file对象，并把文件的内容以字符串保存在result属性中，当读取完成时，
            reader.readAsBinaryString(file);
            //文件加载完成时执行该函数
            reader.onload = function(e) {
                //result属性将包含所读取文件原始的二进制格式
                resolve(e.target.result);
            };
            //读取文件失败时执行该函数
            reader.onerror = function(e) {
                reject(e);
            }
        });
    }


    let input = document.querySelector('.file');
    input.onchange = function() {
        //XlsxPopulate插件
        // XlsxPopulate.fromDataAsync(this.files[0])
        //     .then(workbook => {
        //         window.workbook = workbook;
        //         var sheet = workbook.sheet(0);
        //         var rows = sheet._rows;
        //         rows.forEach(row => {
        //             // console.log(row);
        //             row._cells.forEach(cell => {
        //                 console.log(cell);
        //             })
        //         })
        //     }).catch(error => {
        //         console.log(error);
        //     });



        reader(this.files[0])
            .then(res => {
                //读取xlsx文件，以'binary'类型读取
                // let wb = XLSX.read(new Uint8Array(res), {
                //     // type: "binary",
                //     type: "array",
                //     //保留单元格原来的样式
                //     cellStyles: true,
                //     raw: true
                // });
                let wb = XLSX.read(res, {
                    type: "binary",
                    // type: "array",
                    //保留单元格原来的样式
                    cellStyles: true,
                    raw: true
                });
                let sheetName = wb.SheetNames[0];
                let sheet = wb.Sheets[sheetName];
                // //解析为json格式的数组  
                // XLSX.utils.sheet_to_json 生成对象数组
                let tab_content = XLSX.utils.sheet_to_json(sheet, {
                    //header为1，则默认为生成空白行。
                    header: 1,
                    defval: '',
                    //在输出中包括空行** blankrows必须为true才能生成空白行
                    blankrows: true
                });
                //由表格数据组成的一个二维数组
                var merges = sheet["!merges"];
                var arr = [];
                merges.forEach(function(item) {
                    var colspan = item.e.c - item.s.c + 1;
                    var rowspan = item.e.r - item.s.r + 1;
                    var res = {
                        row: item.s.r,
                        col: item.s.c,
                        rowspan: rowspan,
                        colspan: colspan
                    };
                    arr.push(res);
                });
                var bgcolor;
                var fontcolor;
                // console.log(sheet);
                let data = tab_content,
                    container = document.getElementById('container'),
                    settings = {
                        data: data,
                        //当值为true且列宽未设置时，自适应列大小
                        autoColumnSize: true,
                        //设置true将启用默认列标题
                        colHeaders: true,
                        //设置true将启用默认行标题
                        rowHeaders: true,
                        //允许更改列宽
                        manualColumnResize: true,
                        //允许更改行高
                        manualRowResize: true,
                        mergeCells: arr,
                        // mergeCells: [],
                        licenseKey: 'non-commercial-and-evaluation',
                        colWidths: sheet["!cols"].map((item) => item.wpx * 1.5),
                        // mergeCells: [{
                        //     //合并的开始索引单元格
                        //     row: 1,
                        //     col: 0,
                        //     //合并的结束索引单元格
                        //     rowspan: 12,
                        //     colspan: 1
                        // }],

                        //启用自定义右键单击上下文菜单
                        contextMenu: {
                            items: {
                                row_above: {
                                    name: "向上插入一行"
                                },
                                row_below: {
                                    name: "向下插入一行"
                                },
                                col_left: {
                                    name: "向左插入一列"
                                },
                                col_right: {
                                    name: "向右插入一列"
                                },
                                remove_row: {
                                    name: "删除行"
                                },
                                remove_col: {
                                    name: "删除列"
                                },
                                mergeCells: {
                                    name: "合并单元格"
                                },
                                copy: {
                                    name: "复制"
                                },
                                cut: {
                                    name: "剪切"
                                },
                            },
                        },


                        //cells属性用来设置每个单元格的属性
                        cells(row, col, prop) {
                            let colMap = {
                                0: "A",
                                1: "B",
                                2: "C",
                                3: "D"
                            };
                            //row的行是从1开始的
                            let cell = sheet[colMap[col] + (row + 1)];
                            if (cell) {
                                //给每一行单元格设置样式
                                return cell.s;
                            }
                        },
                        renderer: (instance, TD, row, col, prop, value, cellProperties) => {
                            //设置单元格的内容在垂直和水平方向上均为居中
                            TD.className = 'htCenter htMiddle';

                            //设置背景色
                            if (cellProperties.fill) {
                                if (cellProperties.fill.fgColor.rgb.length === 8) {
                                    TD.style.background = cellProperties.fill.fgColor.rgb
                                        .substring(2)
                                        .replace(/^/, "#");
                                } else {
                                    TD.style.background = "#" + cellProperties.fill.fgColor.rgb;
                                }
                                bgcolor = TD.style.background;

                                //设置字体样式
                                TD.style.fontSize = cellProperties.font.sz + "px";
                                if (cellProperties.font.color) {
                                    if (cellProperties.font.color.rgb.length === 8) {
                                        TD.style.color = cellProperties.font.color.rgb
                                            .substring(2)
                                            .replace(/^/, "#");
                                    } else {
                                        TD.style.color = "#" + cellProperties.font.color.rgb;
                                    }
                                    fontcolor = TD.style.color;
                                }



                                //设置边框样式
                                borderDirections = Object.keys(cellProperties.border);
                                if (borderDirections.length > 0) {
                                    borderDirections.forEach((item) => {
                                        try {
                                            let color;
                                            if (cellProperties.border[item].color.rgb.length > 6) {
                                                color = cellProperties.border[item].color.rgb
                                                    .substring(2)
                                                    .replace(/^/, "#");
                                            } else {
                                                color = "#" + cellProperties.border[item].color.rgb;
                                            }
                                            TD.style["border-" + item] = `1px solid ${color}`;
                                        } catch (e) {}
                                    });
                                }
                            } else {
                                // console.log(cellProperties);
                                // if(cellProperties.row===){

                                // }
                                // console.log(cellProperties.row);//0,1,2,3
                                //row 0,1,2,3
                                // TD.style.color = fontcolor;
                                // TD.style.background = bgcolor;
                            }

                            //给每一个单元格赋内容值
                            TD.innerText = value;
                        },
                    },
                    hot;
                hot = new Handsontable(container, settings);
                // let MergeCellsPlugin = hot.getPlugin("MergeCells");
                // merges.forEach((item) => {
                //     MergeCellsPlugin.merge(--item.s.r, item.s.c, --item.e.r, item.e.c);
                // });
                // hot.setDataAtCell(0, 1, 'Ford');
            })
            .catch(err => {
                console.log(err);
            });
    }
}